<template>
  <nav class="navbar">
    <div class="navbar-left">
      <img :src="logoSrc" alt="logo" class="logo" />
      <router-link to="/" class="nav-title">打字练习</router-link>
    </div>
    <div class="navbar-center">
      <router-link to="/practice" class="nav-link">打字练习</router-link>
      <template v-if="isLogin">
        <router-link to="/games" class="nav-link">打字游戏</router-link>
      </template>
      <template v-else>
        <span class="nav-link disabled"><span class="lock">🔒</span>打字游戏</span>
      </template>
      <router-link to="/tutorial" class="nav-link">打字教程</router-link>
      <router-link to="/wubi" class="nav-link">五笔教程</router-link>
      <router-link to="/rank" class="nav-link">排行榜</router-link>
      <router-link to="/faq" class="nav-link">常见问题</router-link>
      <router-link to="/about" class="nav-link">关于我们</router-link>
    </div>
    <div class="navbar-right">
      <button class="theme-btn" @click="$emit('toggle-theme')">{{ theme === 'dark' ? '🌙' : '☀️' }}</button>
      <template v-if="isLogin">
        <span class="username">{{ username }}</span>
        <button class="logout-btn" @click="handleLogout">登出</button>
      </template>
      <template v-else>
        <router-link to="/login" class="nav-link">登录</router-link>
        <router-link to="/register" class="nav-link">注册</router-link>
      </template>
    </div>
  </nav>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'NavBar',
  props: {
    theme: String
  },
  computed: {
    ...mapState('user', ['isLogin', 'username']),
    logoSrc() {
      return require('@/assets/dzlxlogo.png')
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    async handleLogout() {
      try {
        await this.logout()
        this.$router.push('/login')
      } catch (err) {
        console.error('Logout error:', err)
      }
    }
  }
}
</script>
<style scoped>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary-color);
  color: #fff;
  padding: 0.5rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.navbar-left {
  display: flex;
  align-items: center;
}
.logo {
  width: 32px;
  height: 32px;
  margin-right: 1rem;
}
.nav-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
.navbar-center {
  display: flex;
  gap: 1.2rem;
}
.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}
.nav-link:hover {
  color: #ffd700;
}
.navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.theme-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.username {
  margin-right: 0.5rem;
  font-weight: bold;
}
.logout-btn {
  background: #fff;
  color: var(--primary-color);
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
.logout-btn:hover {
  background: #ffd700;
  color: #333;
}
.nav-link.disabled {
  color: #bbb !important;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}
.lock {
  margin-right: 0.3em;
  font-size: 1.1em;
}
</style> 